<template>
  <div class="step-one center card">
    <h3>认证企业信息</h3>
    <h4>上传真实营业执照，并且字迹清晰，否则无法认证通过</h4>
    <a-upload
      v-model:file-list="fileList"
      accept=".jpg,.JPG"
      name="avatar"
      list-type="picture-card"
      class="avatar-uploader flex"
      :show-upload-list="false"
      :action="null"
      :before-upload="beforeUpload"
      @change="handleChange"
    >
      <img
        v-if="imageUrl"
        style="width: 450px; height: 432px"
        :src="imageUrl"
        alt="avatar"
      />
      <div v-else>
        <loading-outlined v-if="loading"></loading-outlined>
        <plus-outlined
          :style="{ fontSize: '148px', color: '#E8ECF0' }"
          v-else
        ></plus-outlined>
        <div class="ant-upload-text">上传营业执照</div>
        <div class="ant-upload-text">仅支持.JPG.格式</div>
      </div>
    </a-upload>
    <a-alert
      message="认证通过"
      style="text-align: left; border: none"
      type="success"
      show-icon
      v-if="businessLicense"
    >
      <template #icon><CheckCircleOutlined style="color: #fff" /></template>
    </a-alert>
  </div>
  <div class="btns center">
    <a-space>
      <a-button>重置</a-button>
      <a-button type="primary" @click="handleNext">下一步</a-button>
    </a-space>
  </div>
</template>
<script setup>
import {
  PlusOutlined,
  LoadingOutlined,
  CheckCircleOutlined,
} from "@ant-design/icons-vue";
import { singleUploadsFile } from "@/api/upload";
import { checkBusinessLicense } from "@/api/user";
import { ref } from "vue";
const fileList = ref([]);
const loading = ref(false);
const imageUrl = ref("");
function beforeUpload(file) {
  //判断是否小于20M
  let isLt20M = file.size < 1024 * 1024 * 20;
  if (!isLt20M) {
    //将fileList中本次file文件删掉
    fileList.splice(fileList.indexOf(file), 1);
    message.error("所选文件单个超过20M，已自动过滤，请检查~");
  }
  return false;
}
const handleChange = (file) => {
  loading.value = true;
  let formData = new FormData();
  formData.append("file", file.file);
  formData.append("type", "1");
  singleUploadsFile(formData).then((res) => {
    if (res.code == 200) {
      imageUrl.value = res.data;
      loading.value = false;
      checkBusinessLicenseFn(res.data);
    }
  });
};
// 识别
const emits = defineEmits("handleSubmit");
const businessLicense = ref(null);
const checkBusinessLicenseFn = async (data) => {
  const result = await checkBusinessLicense({ image: data });
  if (result.code == 200) {
    businessLicense.value = result.data;
  }
};
const handleNext = () => {
  if(businessLicense.value){
    emits("handleSubmit", 1, businessLicense.value);
  }
}
</script>
<style lang="less" scoped>
:deep(.ant-upload.ant-upload-select-picture-card) {
  width: 100% !important;
  height: 100% !important;
  background-color: transparent !important;
  border: none !important;
  margin: 0 !important;
}
:deep(.ant-alert-success) {
  background-color: #6cb02e !important;
  color: #fff;
}
</style>
